<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: inherit;
            text-align: center;
        }
        #one_ul{
            width: 120px;
            height: 100px;
            background: springgreen;
            margin: 0 auto;
            color: white;
        }
        .one_li{
            width: 120px;
            height: 100px;
            float: left;
            line-height: 100px;
            text-align: center;
        }
        .two_li{
            width: 120px;
            height: 100px;
            float: left;
            line-height: 100px;
            text-align: center;
        }
        .two_ul{
            background: green;
            display: none;

            width: 120px;
            height: 400px;
            background: springgreen;
            margin: 0 auto;
            color: white;


        }
        /* .two_li{
            color: white;
        } */
        
        li:hover{
            background: skyblue;
            color: pink;
        }
       
    </style>
</head>
<body>
    <ul id="one_ul">
        <li class="one_li">
            <a href="#">苏苏最帅</a>         
        </li> 
    </ul>
    <ul class="two_ul">
        <li class="two_li">
            <a href="#">奥利给</a>
        </li>
        <li class="two_li">
            <a href="#">加油</a>
        </li>
        <li class="two_li">
            <a href="#">冲冲冲</a>
        </li>
    </ul>

<script>
   
    var li1 = document.getElementsByClassName("one_li")
 
    var a1 = document.querySelectorAll('.two_li > a')
    var a2 = document.querySelector('.one_li > a')


    var ul1 = document.querySelector(".two_ul")
    var li1 = [...li1]
    
  

    li1.forEach(v => {
            v.onclick = () => {
                ul1.style.display = 'block';
               
            }
        });
    a1.forEach(v => {
            v.onclick = () => {
              console.log(11111)
                a2.innerHTML = v.innerText;
            
                ul1.style.display = 'none';
            }
        });

document.write("你是什么啊")

    



</script>


</body>
</html>